/**
 *  语言切换组件
 *  */ 
import { usePathname } from "next/navigation";
import { languages } from "../i18n/settings"
import Link from "next/link";
import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from "@nextui-org/react";
import Image from "next/image";
import Text from "./text";
import { tools } from "@/utils/tools";

function formatRouter(pathname){
    let formatPathname = pathname
    for(var i = 0; i < languages.length; i++){
        if(pathname.includes(languages[i])){
            formatPathname = formatPathname.replace('/'+languages[i],'')
        }
    }
    if(!formatPathname){
        formatPathname = '/'
    }
    return formatPathname
}
// props: lng 语言
export default function Language(props) {
    const pathName = usePathname()
    const formatedPathName = formatRouter(pathName)
    // console.log('pathName', pathName,'formatedPathName',formatedPathName)
    return (
        <Dropdown>
            <DropdownTrigger>
                <Image src={ props.lng == 'cn'?'/chinese.svg':'/english.svg'} width={20} height={20} alt="language">
                </Image>
            </DropdownTrigger>
            <DropdownMenu aria-label="Language">
                {
                    languages.map((l,index)=>{
                        return (
                            <DropdownItem key={index}>
                                <Link href={"/" + l + formatedPathName} style={{'display':'flex'}} onClick={tools.clearLock}>
                                    <Image src={l == 'cn'?'/chinese.svg':'/english.svg'} width={20} height={20} alt="language" style={{marginRight: '10px'}}>
                                    </Image>
                                    <Text>{
                                        l == 'cn'?
                                        '中文'
                                        :
                                        'English'
                                    }</Text>
                                </Link>
                            </DropdownItem>
                        )
                    })
                }
            </DropdownMenu>
        </Dropdown>
    )
}